import 'package:flutter/material.dart';
import 'package:flutter_demo/views/tabViews/view1.dart';
import 'package:flutter_demo/views/tabViews/view2.dart';
import 'package:flutter_demo/views/tabViews/view3.dart';
import 'package:flutter_demo/views/tabViews/view4.dart';

class Test extends StatefulWidget {
  Test({Key key, this.data}) : super(key: key);
  final String data;
  @override
  State<StatefulWidget> createState() {
    return new TestState();
  }
}

class TestState extends State<Test> with SingleTickerProviderStateMixin{
  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,     //动画效果的异步处理，默认格式，背下来即可
      length: 4      //需要控制的Tab页数量
    );  
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('测试' + widget.data),// widget.data获取状态类所归属组件中的成员变量data
        // leading: Builder(builder: (ctx) {// 自定义抽屉开关按钮
        //   return new IconButton(
        //     icon: Icon(Icons.accessibility_new),
        //     onPressed: () {
        //       Scaffold.of(ctx).openDrawer();// Scaffold.of(ctx)是从最近一个父级容器中获取到Scaffold对象，所以需要Builder构造器来获得leading组件自身的BuildContext，这样其父级才是Scaffold
        //     },
        //   );
        // }),
      ),
      drawer: new Drawer(
        child: _drawer(),
      ),
      body: new Column(
        children: <Widget>[
          new TabBar(
            controller: _tabController,
            labelColor: Colors.blue,
            unselectedLabelColor: Colors.blueGrey,
            indicatorColor: Colors.blue,
            tabs: <Widget>[
              new Tab(
                text: 'tab1',
              ),
              new Tab(
                text: 'tab2',
              ),
              new Tab(
                text: 'tab3',
              ),
              new Tab(
                text: 'tab4',
              ),
            ],
          ),
          new Expanded(
            child: new TabBarView(
              controller: _tabController,
              children: <Widget>[
                new View1(),
                new View2(),
                new View3(),
                new View4(),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _drawer() {
    return new ListView(
      children: <Widget>[
        new UserAccountsDrawerHeader(   //Material内置控件
          accountName: new Text('LHR'), //用户名
          accountEmail: new Text('example@126.com'),  //用户邮箱
          currentAccountPicture: new GestureDetector( //用户头像
            onTap: () => print('current user'),
            child: new CircleAvatar(    //圆形图标控件
              backgroundImage: new NetworkImage('https://upload.jianshu.io/users/upload_avatars/7700793/dbcf94ba-9e63-4fcf-aa77-361644dd5a87?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),//图片调取自网络
            ),
          ),
          otherAccountsPictures: <Widget>[    //粉丝头像
            new GestureDetector(    //手势探测器，可以识别各种手势，这里只用到了onTap
              onTap: () => print('other user'), //暂且先打印一下信息吧，以后再添加跳转页面的逻辑
              child: new CircleAvatar(
                backgroundImage: new NetworkImage('https://upload.jianshu.io/users/upload_avatars/10878817/240ab127-e41b-496b-80d6-fc6c0c99f291?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
              ),
            ),
            new GestureDetector(
              onTap: () => print('other user'),
              child: new CircleAvatar(
                backgroundImage: new NetworkImage('https://upload.jianshu.io/users/upload_avatars/8346438/e3e45f12-b3c2-45a1-95ac-a608fa3b8960?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
                ),
            ),
          ],
          decoration: new BoxDecoration(    //用一个BoxDecoration装饰器提供背景图片
            image: new DecorationImage(
              fit: BoxFit.fill,
              // image: new NetworkImage('https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg')
              //可以试试图片调取自本地。调用本地资源，需要到pubspec.yaml中配置文件路径
              image: new ExactAssetImage('images/lake.jpg'),
            ),
          ),
        ),
        new ListTile(
          title: new Text('other page'),
          trailing: new Icon(Icons.arrow_right),
          onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).pushNamed('other', arguments: {'from': 'test'});
            }
        ),
        new Divider(),
        new ListTile(
          title: new Text('empty'),
          trailing: new Icon(Icons.art_track),
        ),
      ],
    );
  }
}